<%@ page language="java" contentType="text/html;charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/views/front/include/taglib.jsp"%>
<!DOCTYPE html>
<html>
<head>
	<title>统计报表</title>
	<meta charset="utf-8">
	<script type="text/javascript" src="${frontStatic}/js/jquery.min.js"></script>

	<script type="text/javascript"
		src="${ctxStatic}/selectDate/dateRange.js"></script>
	<script type="text/javascript"
		src="${ctxStatic}/selectDate/monthPicker.js"></script>
	<link rel="stylesheet" type="text/css"
		href="${ctxStatic}/selectDate/dateRange.css" />
	<link rel="stylesheet" type="text/css"
		href="${ctxStatic}/selectDate/monthPicker.css" />

	<!-- 引入 ECharts 文件 -->
	<script src="${ctxStatic}/echarts3/echarts.js"></script>
	<!-- 引入 vintage 主题 -->
	<script src="${ctxStatic}/echarts3/theme/macarons.js"></script>

</head>
<style>
input,select {
	background: #fff;
	border: 1px solid #cccccc;
	padding: 5px;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
}
#submit{
	background: #39a8e8;
}
</style>
<body>
	<div>

		<div class="ta_date" id="div_date1">
			<span class="date_title" id="date1"></span> <a class="opt_sel"
				id="input_trigger1" href="#"> <i class="i_orderd"></i>
			</a>
		</div>
		&nbsp;&nbsp;&nbsp;&nbsp; 班级:&nbsp; <select id="classesId"
			name="classesId" style="height:30px;width:auto;"
			onchange="selectchange()">
			<option value="" selected="selected">请选择</option>
			<c:forEach items="${classList}" var="ddclasses">
				<option value="${ddclasses.classesId}">${ddclasses.classesName}</option>
			</c:forEach>
			<option value="all">全校</option>
		</select> <input type="hidden" id="startDate" name="startDate" /> <input
			type="hidden" id="endDate" name="endDate" />
		&nbsp;<input id="submit" name="submit" onclick="toSubmit();" value=" 查 询 " type="button"/>
		<script type="text/javascript">
		Date.prototype.Format = function(fmt)   
		{ //author: meizz   
		  var o = {   
		    "M+" : this.getMonth()+1,                 //月份   
		    "d+" : this.getDate(),                    //日   
		    "h+" : this.getHours(),                   //小时   
		    "m+" : this.getMinutes(),                 //分   
		    "s+" : this.getSeconds(),                 //秒   
		    "q+" : Math.floor((this.getMonth()+3)/3), //季度   
		    "S"  : this.getMilliseconds()             //毫秒   
		  };   
		  if(/(y+)/.test(fmt))   
		    fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));   
		  for(var k in o)   
		    if(new RegExp("("+ k +")").test(fmt))   
		  fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));   
		  return fmt;   
		} ; 
			//var STATS_START_TIME = '1329148800';
			var dateRange1 = new pickerDateRange('date1', {
				isTodayValid : true,
				startDate : (new Date()).Format("yyyy-M-d"),
				endDate :   (new Date()).Format("yyyy-M-d"),
				needCompare : false,
				defaultText : ' 至 ',
				autoSubmit : true,
				inputTrigger : 'input_trigger1',
				theme : 'ta',
				success : function(obj) {
					//$("#dCon2").html('开始时间 : ' + obj.startDate + '<br/>结束时间 : ' + obj.endDate);
					//$("#classesId").val("");
					$("startDate").val(obj.startDate);
					$("endDate").val(obj.endDate);
						//此处用input暴露日期段
				}
			});
		</script>

	</div>
	<div style="height:30px;"></div>
	<!-- 为 ECharts 准备一个具备大小（宽高）的Dom -->
	<div id="main" style="width:auto;height:400px;"></div>
	<script type="text/javascript">
	//var myChart = echarts.init(document.getElementById('main'));
	var myChart = echarts.init(document.getElementById('main'), 'macarons');
	var url='${root}/dd/chart/ajax/getLineData.do';
	
	function toSubmit(){
		var classesId=$("#classesId").val();
		var startDate=$("#startDate").val();
		var endDate=$("#endDate").val();
		if(classesId==null | classesId==""){
			alert("请选择班级");
			return;
		}
		var postData={"classesId":classesId,"startDate":startDate,"endDate":endDate};
		$.ajax({
			url: url,
			type: "post",
			dataType : "json",
			data: postData,
			success: function(ret){
			 option = {
				    title : {
				        text: ret.textName
				        //subtext: '纯属虚构'
				    },
				    tooltip : {
				        trigger: 'axis'
				    },
				    legend : {
						data : [ /* "未到","请假", */"出勤率" ]
					},
					color:[/* '#F70909','#F7F709', */'#6ba300'],
				    toolbox: {
				        show : false,
				        feature : {
				            mark : {show: true},
				            dataView : {show: true, readOnly: false},
				            magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
				            restore : {show: true},
				            saveAsImage : {show: true}
				        }
				    },
				    calculable : true,
				    xAxis : [
				        {
				            type : 'category',
				            boundaryGap : false,
				            data : ret.dateList
				        }
				    ],
				    grid: { // 控制图的大小，调整下面这些值就可以，
			             x: 40,
			             x2: 100,
			             y2: 150,// y2可以控制 X轴跟Zoom控件之间的间隔，避免以为倾斜后造成 label重叠到zoom上
			         },
				    yAxis : [
				        {
				            type : 'value'
				        }
				    ],
				    series : [ /* {
								name : '未到',
								type : 'line',
								stack : '总量',
								areaStyle : false,
								data : ret.unHereList
							},  {
								name : '请假',
								type : 'line',
								stack : '总量',
								areaStyle : false,
								data : ret.isLeaveList
							},  */{
								name : '出勤率',
								type : 'line',
								stack : '总量',
								label : {
									normal : {
										show : true,
										position : 'top'
									}
								},
								areaStyle : false,
								data : ret.isHereList
							} ]
				};
			 myChart.setOption(option);
			}
		});
	};
	
	function selectchange(){
		
	};

	/* option = {
			title : {
				text : '统计报表'
			},
			tooltip : {
				trigger : 'axis'
			},
			legend : {
				data : [ '未到','请假','已到' ]
			},
			color:['#F70909','#F7F709','#11EE3D'],
			toolbox : {
				feature : {
					saveAsImage : {}
				}
			},
			grid : {
				left : '3%',
				right : '4%',
				bottom : '3%',
				containLabel : true
			},
			xAxis : [ {
				type : 'category',
				boundaryGap : false,
				data : [ '周一', '周二', '周三', '周四', '周五', '周六', '周日' ]
			} ],
			yAxis : [ {
				type : 'value'
			} ],
			series : [ {
				name : '未到',
				type : 'line',
				stack : '总量',
				areaStyle : {
					normal : {}
				},
				data : [ 620, 232, 501, 134, 60, 330, 210 ]
			},  {
				name : '请假',
				type : 'line',
				stack : '总量',
				areaStyle : {
					normal : {}
				},
				data : [ 120, 132, 101, 134, 90, 230, 210 ]
			}, {
				name : '已到',
				type : 'line',
				stack : '总量',
				label : {
					normal : {
						show : true,
						position : 'top'
					}
				},
				areaStyle : {
					normal : {}
				},
				data : [ 820, 932, 901, 934, 1290, 1330, 1320 ]
			} ]
		};
		myChart.setOption(option); */
		
	</script>
</body>
</html>
